<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 500px;
            height: 500px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="box">
    <button class="btn">按钮</button>
    <span id="span">
        <a href="#">百度</a>
    </span>
    <p> i am next sibling</p>
</div>
<script type="text/html">
    //加载
    window.onload = function() {
//var nodeA = document.getElementsByTagName("a")[0];
     /*   var btnNode = document.getElementById("btn");
        //事件监听
        btnNode.onclick = function () {

            var box = this.parentNode;
            box.style.backgroundColor = "yellow";
            console.log(nodeA);
            //父节点

        }*/

    }


    /*    //兄弟节点
    var  span = document.getElementById("span");
    //previous brother
    var pre = span.previousElementSibling || span.previousSibling;
    //next brother
    var next = span.nextElementSibling || span.nextSibling; // nextElementSibling  nextSibling 做兼容
     console.log(pre);
    console.log(next);
    */

        //子节点
    var  box = document.getElementById("box");
    //all kid nodes
    var allNode = box.childNodes;//数组 包括空元素的数组 需要过滤
    var nodelist = [];
    for(var i = 0;i< allNode.length;i++)
    {
        var node = allNode[i];
        if (node.nodeType === 1)
        {
            nodelist.push(node)  ;
        }

    }

    console.log(nodelist,nodelist.length);


</script>

</body>
</html>